<%@ page contentType="text/html; charset=utf-8" language="java"  errorPage="" %>
<%@ include file="page_init.jsp"%>

<script type="text/javascript">
function changePageLeftClass(e){
	//左侧次要菜单 - 异常所有 菜单 样式
	$("[name=resource]").each(function(n, resource){
		$(resource).removeClass("active");
	});
	//左侧次要菜单 - 为点击菜单 增加 样式
	$(e).parent().addClass("active");
}
</script>

<nav id="sidebar" role="navigation" class="navbar-default navbar-static-side" >
    <div class="sidebar-collapse menu-scroll">
        <ul id="side-menu" class="nav">
        	<!-- 空格行, 没有会样式错乱 -->
            <li class="user-panel" ><div class="clearfix"></div></li>
        	<!-- 举例 
            <li>
            	<a href="#">
            		<i class="fa fa-laptop fa-fw" ></i>
            		<span class="menu-title">Frontend</span>
            		<span class="fa arrow"></span>
            		<span class="label label-yellow">v3.0</span>
            	</a>
                <ul class="nav nav-second-level">
                    <li>
                    	<a href="frontend-one-page.html">
                    		<i class="fa fa-align-left"></i>
                    		<span class="submenu-title">One Page</span>
                    	</a>
                    </li>
                </ul>
            </li>
        	-->
            
            <c:forEach	items="${USERAuthoritySysCatalogSysResourceList}" var="authority" varStatus="authorityVarStatus" >
				<c:forEach	items="${authority.catalogList}" var="catalog" >
					<li name="catalog" relyauthority="authority${authority.id}" <c:if test="${authorityVarStatus.count!=1}">style="display: none;"</c:if> >
						<!-- 左侧主级目录 -->
						<a href="#">
							<i class="fa fa-th-list fa-fw">
								<div class="icon-bg bg-pink"></div>
							</i>
							<span class="menu-title">${catalog.catalogname}</span>
							<span class="fa arrow"></span>
						</a>
						<!-- 左侧次级目录 -->
		                <ul class="nav nav-second-level collapse">
						<c:forEach	items="${catalog.resourceList}" var="resource" >
		                    <li name="resource" >
		                    	<a href="javascript:void(0);" onclick="javascript:$('#page-right').attr('src','${ctx}${resource.url}');changePageLeftClass(this); ">
		                    		<i class="fa fa-angle-double-right"></i>
		                    		<span class="submenu-title">${resource.resourcename}</span>
		                    	</a>
		                    </li>
						</c:forEach>
		                </ul>
	            	</li>
				</c:forEach>
			</c:forEach>

        </ul>
    </div>
</nav>